<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><%- t('trial.title') %> - <%- t('global.title') %></title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/images/favicon.ico" />
    <link rel="stylesheet" href="/dashboard/css/intel.css">
    <link rel="stylesheet" href="/dashboard/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dashboard/css/trial.css">
    <link rel="stylesheet" href="/dashboard/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/dashboard/css/bootstrap.min.css">
    <script type="text/javascript">
    </script>
</head>
<body>
<div class="divMargin">
    <div class="divFloatSTyle">

        <div class="div-bar">
            <div class=" div-nav-bar col-lg-5">
                <img class="img-responsive imagesStyle" src="/images/trial_picture/01.png" width="258" alt="">
            </div>
            <div class="home-tips col-lg-6 hidden-md hidden-sm hidden-xs">
                <ui class="ui-home-tips">
                    <li><a class="a-line" href="http://parllay.cn"><%- t('trial.header_links.parllay') %></a></li>
                    <li><a class="a-line" href="http://www.parllay.cn/billboards/"><%- t('trial.header_links.introduction')%></a></li>
                    <li><a class="a-line" href="https://parllay.kf5.com/hc/kb/section/98884/"><%- t('trial.header_links.help')%></a></li>
                    <li><%- t('trial.header_links.hotline')%> 400-101-2035</li>
                </ui>
            </div>
        </div>

        <div class=" bgColor div-content">
            <div class=" marginDivStyle div-content-last col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right" style="margin-bottom:0">
                <div class="tablePaddingStyle">
                    <div class="nav-tabs-custom" style="margin-bottom:0">
                        <!--<div class="tab-content">-->
                            <div class="login-box-body tab-pane active" id="apply">
                                <!--<form  id="singup_form">-->
                                <input type="hidden" value="<%= security_code %>" name="security_code">
                                <div class="fix-top">
                                    <h5><%- t('trial.request_form.industries.label')%></h5>
                                    <div class="trial-industry">
                                        <ul style="margin-bottom: 10px">
                                            <li data-value="food" class=""><span> <%- t('trial.request_form.industries.restaurant')%> </span></li>
                                            <li data-value="education" class=""><span> <%- t('trial.request_form.industries.education')%> </span></li>
                                            <li data-value="spa_yoga" class=""><span> <%- t('trial.request_form.industries.yoga')%> </span></li>
                                            <li data-value="sport" class=""><span> <%- t('trial.request_form.industries.sports')%> </span></li>
                                            <li data-value="travel" class=""><span> <%- t('trial.request_form.industries.travel')%> </span></li>
                                            <li data-value="shopping_mall" class=""><span> <%- t('trial.request_form.industries.mall')%> </span></li>
                                            <li data-value="boutique" class=""><span> <%- t('trial.request_form.industries.boutique')%> </span></li>
                                            <li data-value="luxury" class=""><span> <%- t('trial.request_form.industries.luxury')%> </span></li>
                                            <li data-value="retail" class=""><span> <%- t('trial.request_form.industries.retail')%> </span></li>
                                            <li data-value="meeting" class=""><span> <%- t('trial.request_form.industries.meeting')%> </span></li>
                                            <li data-value="cars" class=""><span> <%- t('trial.request_form.industries.cars')%> </span></li>
                                        </ul>
                                    </div>
                                </div>
                                <h5><%- t('trial.request_form.address.text')%></h5>
                                <div class="form-group has-feedback">
                                    <input type="email" class="form-control" name="email" placeholder="<%- t('trial.request_form.address.email')%>" id="email">
                                    <span class="fa fa-envelope form-control-feedback"></span>
                                    <div style="margin-top: 10px">
                                        <%- t('trial.request_form.explain')%>
                                    </div>
                                </div>
                                <div class="form-group text-center has-error">
                                    <h5 class="help-block" id="singup_err"></h5>
                                </div>
                                <div class="clearfix"></div>
                                <div class="row log-area">
                                    <div class="col-xs-12">
                                        <div></div>
                                        <button class="btn-style btn btn-lg btn-primary btn-block btn-flat" id="submit_request"><%- t('trial.request_form.submit')%></button>
                                    </div>
                                </div>
                            </div>
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="marginDivStyle div-content-middle col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-left">
                <div class="hpDiv text-center">
                    <h3><%- t('trial.template1.advertising') %></h3>
                    <p><h4><%- t('trial.template1.buy') %></h4></p>
                </div>
                <div class="div-imgStyle ">
                    <img class="imgMarginAuto img-responsive image1" src="/images/trial_picture/02.png" alt="">
                </div>
            </div>
        </div>


        <div class=" bgColor div-picture-content">
            <div class="col-lg-12 col-md-12 colsm-12 col-xs-12">
                <div class="hpDiv text-center">
                    <h3><%- t('trial.image.quotes')%></h3>
                    <h3 class="text-right">—— Neilsen Study</h3>
                </div>
                <div>
                    <img class="mediaWidth img-responsive imgMarginAuto image2" src="/images/trial_picture/04.png" alt="">
                </div>
            </div>
        </div>

        <div class=" div-lastcontent" style="position:relative">
            
            <div class="marginDivStyle marginDivStyle-last div-content-middle col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-right">
                <div class="hpDiv hpDiv-last">
                    <h3><%- t('trial.image.introduce')%></h3>
                    <br>
                    <p><h4><%- t('trial.image.presentation')%></h4></p>
                    <p><h4><%- t('trial.image.function')%></h4></p>
                </div>
            </div>
            <div class="marginDivStyle div-content-middle col-lg-8 col-md-8 col-sm-8 col-xs-12 pull-left">
                <img class="mediaWidth img-responsive imgMarginAuto image3" src="/images/trial_picture/05.png" alt="">
            </div>
        </div>

    </div>

</div>
<div class="copright text-center" style="padding: 20px 0 20px 0; ">
    <div class="col span_5">
        <p>@2016 <%- t('trial.copyright')%> </p>
    </div>
    <div class="col span_7 col_last">

    </div>
</div>

<script src="/dashboard/js/jQuery-2.1.4.min.js"></script>
<script src="/dashboard/js/bootstrap.min.js"></script>
<script>
    $(function(){
        var industry;
        $('.trial-industry li').click(function(){
            if($(this).hasClass('industry-selected')){
                return
            } else {
                $(this).siblings('.industry-selected').removeClass('industry-selected');
                $(this).addClass('industry-selected');
                industry = $(this).attr('data-value');
            }
        })
        $('#submit_request').click(function(e){
            e.stopPropagation();

            function check(){
                var errorMsg=null;
                if(!industry){
                    return errorMsg = {msg:'<%- t('trial.request_form.select_industry')%>',target:'industry'}
                }
                if( !$.trim($("input[name='email']").val() )){
                    return errorMsg = {msg:'<%- t('trial.request_form.address.email_null')%>',target:'email'}
                }else if( $.trim($('#email').val())!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($('#email').val()) ){
                    return errorMsg = {msg:'<%- t('trial.request_form.address.isemail')%>',target:'email'}
                }
                
                return errorMsg
            }

            var err=check();

            if(err){
                $('#singup_err').html(err.msg);
                return false;
            } else {
                var email = $("input[name='email']").val();
                var securityCode = $("input[name='security_code']").val();
                $.ajax({
                    type: "post",
                    url:'/request-trial',
                    dataType: 'json',
                    data: {
                        email: email,
                        industry: industry,
                        security_code: securityCode
                    },
                    success: function(data){
                        console.log(data);
                        if(data.success) {
                            //var qr_code_url = data.qr_code_url;
                            $(".nav-tabs-custom").html('<h4 class="text-center" style="padding: 50px 20px 20px 20px"><%- t('trial.request_form.application_successful')%></h4>'
                                                        +'<div style="text-align: center; font-size: 17px; padding: 20px">'+"<%- t('trial.request_form.scan_start')%>"+'</div>'
                                                        +'<div style="text-align: center; font-size: 17px; padding: 20px">'
                                                        + '<img class="qrcode" src='+data.data.qrcode_url+ ' />'
                                                        + '</div>'
                                                        + '<div style="text-align: center; font-size: 17px; padding: 20px"><%- t('trial.request_form.open_circle_friends')%></h4>'
                                                        + '<div class="text-center" style="padding:20px 0 30px"><a class="btn btn-primary btn-style-grey" target="_blank" href="'+data.data.wall_url+'"><%- t('trial.request_form.open_friends')%></a></div>');
                        } else {
                            $("#singup_err").html(data.error);
                        }
                    },
                    error: function(error){
                        console.log(error);
                    }
                })
            }
        })
    })
</script>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-46105991-4', 'auto');
    ga('send', 'pageview')
</script>
<script src="/dashboard/js/bootstrap.min.js"></script>
<script src="/dashboard/js/jQuery-2.1.4.min.js"></script>
</body>
</html>
